
<html>
    <head>
        <script src="http://www.nikesh.me/js/mootools-1.2.4-core-nc.js" type="text/javascript" ></script>

        <style>
            .img{
                -webkit-transform:scale(0.6);
                -moz-transform:scale(0.6);
                -o-transform:scale(0.6);
                float:left;
                margin-left:-50px;
                margin-right:-50px;
                margin-top:-10px;
                -webkit-transition-duration: 0.5s;
                -moz-transition-duration: 0.5s;
                -o-transition-duration: 0.5s;
            }
            .img img{
                padding:10px;
                border:1px solid red;
            }
            .img:hover{
                -webkit-transform:scale(0.8);
                -webkit-box-shadow:0px 0px 30px red;
                -moz-transform:scale(0.8);
                -moz-box-shadow:0px 0px 30px red;
                -o-transform:scale(0.8);
                -o-box-shadow:0px 0px 30px red;
            }
            .img .mask{
                width: 100%;
                background-color: rgb(0, 0, 0);
                position: absolute;
                height: 100%;
                opacity:0.6;
                cursor:pointer;
                -webkit-transition-duration: 0.5s;
                -moz-transition-duration: 0.5s;
                -o-transition-duration:0.5s;
            }
            .img-1:hover .mask{
                height:0%;
            }
            .img-2:hover .mask{
                height:0%;
                margin-top:130px;
            }
            .img-4:hover .mask{
                margin-left:219px;
                margin-top:135px;
                height:0%;
                width:0%;
            }
            .img-3 .mask-1 {
                width:50%;
            }
            .img-3 .mask-2{
                width:50%;
                margin-left:211px;
            }
            .img-3:hover .mask-1{
                width:0%;
            }
            .img-3:hover .mask-2{
                margin-left:430px;
                width:0%;
            }
            .img-5:hover .mask{
                margin-left:219px;
                margin-top:135px;
                height:0%;
                width:0%;
                -webkit-transform: rotateX(360deg);
                -moz-transform: rotate(360deg);
                -o-transform: rotate(-360deg);
            }
            .img-6:hover .mask{
                margin-left:219px;
                margin-top:135px;
                height:0%;
                width:0%;
                -webkit-transform: rotateZ(750deg);
                -moz-transform: rotateZ(750deg);
                -o-transform: rotat(750deg);
            } 
        </style>

        <script src="http://www.nikesh.me/demo/browserCheck.js" type="text/javascript" ></script>
    </head>
    <body>
        <div id="logo"> <a href="http://www.nikesh.me/blog/">nikesh.me</a></div>
        <div id='container'>
            <div class='heading'> Image hover effect like Flash and JS in Pure CSS</div>
            <div id='image-container'>
                <div class='img img-1'>
                    <div class='mask'></div>
                    <img src='http://www.nikesh.me/image/01.jpg' />
                </div>	
                <div class='img img-2'>
                    <div class='mask'></div>
                    <img src='http://www.nikesh.me/image/07.jpg' />
                </div>	
                <div class='img img-3'>
                    <div class='mask mask-1'></div>
                    <div class='mask mask-2'></div>
                    <img src='http://www.nikesh.me/image/05.jpg' />
                </div>	
                <div class='img img-4'>
                    <div class='mask'></div>
                    <img src='http://www.nikesh.me/image/04.jpg' />
                </div>	
                <div class='img img-5'>
                    <div class='mask'></div>
                    <img src='http://www.nikesh.me/image/06.jpg' />
                </div>	
                <div class='img img-6'>
                    <div class='mask'></div>
                    <img src='http://www.nikesh.me/image/08.jpg' />
                </div>	
                <div class='clearfix'></div>
            </div>
            <div class='clearfix'></div>
            <br/>
            <div id='warning' style='margin-top:20px;color:#555;text-align:center;'>
                <span style='color:red;'>*</span>CSS animation works only on those Browser which support <b>webkit</b> . I appreciate if you open this example in Chorme , safari .
            </div>
            <div class='label warning'>This is demo page , related article can be found <a href='http://www.nikesh.me/blog/2010/05/sexy-image-hover-effects-using-css3/'>here</a></div>
            <div id='msg' class='label msg'>
                Don't forget to drop some comments on by blog.
            </div>
            <div class="legal">Copyright &copy; 2010  <a href="http://www.nikesh.me">nikesh.me</a></div>
        </div>
        <script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            try {
                var pageTracker = _gat._getTracker("UA-12198000-1");
                pageTracker._trackPageview();
            } catch(err) {}
        </script>

    </body>
</html>	
